<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
	.review_page_title{margin:30px;}
	.gender_wrapper label{display: inline-block;background-color: #FFD9FA;padding: 4px 10px;}
	.right_wrapper label{display: inline-block;background-color: #ddd;padding: 5px 15px;}
	.review_score_div label{display: inline-block;background-image:url("../img/view/review/star_deselected.png");background-repeat:no-repeat;width:30px;height:30px;padding: 10px 10px;}
	.review_register_form{border: 1px solid lightgray;width:752px;margin: auto;}
	.textarea_wrapper{width:720px;margin:15px;text-align: left;}
	.evaluation_wrapper{width:720px;height: 300px;margin:15px;text-align: left;}
	.left_wrapper{margin-left: 30px;width: 430px;height: 300px;float: left;}
	.right_wrapper{width: 260px;height: 300px;float: left;}
	.button_wrapper{width: 720px;height: 50px;margin-bottom: 30px;float: left;text-align: center;}
	#review_title{background-color:#FAFAFA;border: 1px solid #CFCFCF;border-radius: 2px;width: 700px;height: 20px;margin-top: 5px;margin-left: 10px;margin-bottom: 25px;}
	#review_pros, #review_cons, #review_way{background-color:#FAFAFA;border: 1px solid #CFCFCF;border-radius: 2px;width: 700px;height: 100px;margin-top: 5px;margin-left: 10px;margin-bottom: 25px;}
	#page_title_font{font-weight: bold;font-size: 30px;color: #5D5D5D;}
	.title_font{font-weight: bold;font-size: 15px;color: #5D5D5D;}
	#review_title_font{color: #5D5D5D;}
	#review_pros_font{color: #3DB7CC;}
	#review_cons_font{color: #DF4D4D;}
	#review_way_font{color: #FF5E00;}
	#review_score_font{font-size: 20px;}
	#review_giveup_font{color: #5D5D5D;}
	#review_title_font, #review_pros_font, #review_cons_font, #review_way_font{margin-left: 10px;}
	.review_score_text{font-weight: bold;color: #5D5D5D;}
	.gender_text{font-weight: bold;font-size: 12px;color: #5D5D5D;}
	.review_job_text{font-weight: bold;font-size: 12px;color: #5D5D5D;}
	.review_professor_text{font-weight: bold;font-size: 12px;color: #5D5D5D;}
	.review_facility_text{font-weight: bold;font-size: 12px;color: #5D5D5D;}
	.review_scholarship_text{font-weight: bold;font-size: 12px;color: #5D5D5D;}
	.review_awareness_text{font-weight: bold;font-size: 12px;color: #5D5D5D;}
</style>
<script type="text/javascript">
	function registerReview(){
		var review_title=document.getElementById("review_title").value.replace(/\s/g, "");
		var review_pros=document.getElementById("review_pros").value.replace(/\s/g, "");
		var review_cons=document.getElementById("review_cons").value.replace(/\s/g, "");
		var review_way=document.getElementById("review_way").value.replace(/\s/g, "");
		
		if(review_title==""){
			alert("제목을 입력해주세요.");
			return;
		}else if(review_pros==""){
			alert("장점을 입력해주세요.");
			return;
		}else if(review_cons==""){
			alert("단점을 입력해주세요.");
			return;
		}else if(review_way==""){
			alert("진로를 입력해주세요.");
			return;
		}
		
		if(confirm("학과 리뷰를 등록하시겠습니까?"))
			document.getElementById("regiForm").submit();
	}
	
	function score_selected(score_name, index) {
		if(score_name=="review_score"){
			$('.review_score_value_div>label').css({"display":"inline-block", "background-image":"url('../img/view/review/star_deselected.png')", "width":"30px", "height":"30px", "background-repeat":"no-repeat", "padding":"10px 10px"});
			$('.review_score_value_div>input').attr('value', index);
			for(var i=1; i<=index; i++){
				$('#review_score_label_'+i).css({"display":"inline-block", "background-image":"url('../img/view/review/star_selected.png')", "width":"30px", "height":"30px", "background-repeat":"no-repeat", "padding":"10px 10px"});
			}
		}else{
			$('.'+score_name+'_value_div>label').css('background', '#ddd');
			$('.'+score_name+'_value_div>input').attr('value', index);
			
			if(score_name=="review_job") separatedFor(score_name, index, '#F15F5F');
			else if(score_name=="review_professor") separatedFor(score_name, index, '#FF9436');
			else if(score_name=="review_facility") separatedFor(score_name, index, '#FFCD12');
			else if(score_name=="review_scholarship") separatedFor(score_name, index, '#99E000');
			else separatedFor(score_name, index, '#5CD1E5');
		}
		
		var textSpan=$('.'+score_name+'_text');
		
		if(index==1) textSpan.html("매우 낮음");
		if(index==2) textSpan.html("낮음");
		if(index==3) textSpan.html("보통");
		if(index==4) textSpan.html("높음");
		if(index==5) textSpan.html("매우 높음");
	}
	
	function separatedFor(score_name, index, color){
		for(var i=1; i<=index; i++){
			$('#'+score_name+'_label_'+i).css('background', color);
		}
	}
	
	function gender_selected(index) {
		$('#gender_label_0').css('background', '#363636');
		$('.gender_value_div>label').css('background', '#FFD9EC');
		$('#end_gender_label').css('background', '#363636');
		$('.gender_value_div>input').attr('value', index);
		
		for(var i=0; i<=index; i++){
			if(i==0){
				$('#gender_label_'+i).css('background', '#363636');
			}else{
				$('#gender_label_'+i).css('background', '#B2EBF4');
			}
		}
		
		var textSpan=$('.gender_text');

		if(index==0) textSpan.html("남 0 : 여 10");
		if(index==1) textSpan.html("남 1 : 여 9");
		if(index==2) textSpan.html("남 2 : 여 8");
		if(index==3) textSpan.html("남 3 : 여 7");
		if(index==4) textSpan.html("남 4 : 여 6");
		if(index==5) textSpan.html("남 5 : 여 5");
		if(index==6) textSpan.html("남 6 : 여 4");
		if(index==7) textSpan.html("남 7 : 여 3");
		if(index==8) textSpan.html("남 8 : 여 2");
		if(index==9) textSpan.html("남 9 : 여 1");
		if(index==10) textSpan.html("남 10 : 여 0");
	}
</script>
</head>
<body>
<div class="review_register_form">
	<div class="review_page_title">
		<font id="page_title_font">리뷰 작성하기</font><br><br>
	</div>
	
	<form action="review.do" id="regiForm" method="post">
		<input type="hidden" id="command" name="command" value="registerReview">
		<input type="hidden" id="majorunit_no" name="majorunit.majorunit_no" value="${ majorunit_no }">
		<input type="hidden" id="position_no" name="position.position_no" value="${ position_no }">
		
		<div class="evaluation_wrapper">
			<div class="left_wrapper">
				<div class="review_score_div">
					<span class="review_score_title">
						<font class="title_font" id="review_score_font">총점</font>
					</span><p>
					<div class="review_score_value_div">
						<c:forEach var="i" begin="1" end="5">
							<c:choose>
								<c:when test="${ i < 3 }">
									<input type="radio" id="review_score_${i}" name="review_score" value="${i}" onclick="javascript:score_selected('review_score','${i}')" style="display: none;">
									<label for="review_score_${i}" id="review_score_label_${i}" style="display: inline-block;background-image:url('../img/view/review/star_selected.png');width:30px;height:30px;background-repeat:no-repeat;padding: 10px 10px;" onmouseover="javascript:score_selected('review_score','${i}')"></label>
								</c:when>
								<c:when test="${ i == 3 }">
									<input type="radio" id="review_score_${i}" name="review_score" value="${i}" checked="checked" onclick="javascript:score_selected('review_score','${i}')" style="display: none;">
									<label for="review_score_${i}" id="review_score_label_${i}" style="display: inline-block;background-image:url('../img/view/review/star_selected.png');width:30px;height:30px;background-repeat:no-repeat;padding: 10px 10px;" onmouseover="javascript:score_selected('review_score','${i}')"></label>
								</c:when>
								<c:otherwise>
									<input type="radio" id="review_score_${i}" name="review_score" value="${i}" onclick="javascript:score_selected('review_score','${i}')" style="display: none;">
									<label for="review_score_${i}" id="review_score_label_${i}" onmouseover="javascript:score_selected('review_score','${i}')"></label>
								</c:otherwise>
							</c:choose>
						</c:forEach>&nbsp;&nbsp;
						<span class="review_score_text">보통</span>
					</div>
				</div><br><br><br>
				
				<div class="recommend_wrapper">
					<font class="title_font" id="review_recommend_font">지인 추천 여부 :&nbsp;
					<input type="radio" name="review_recommend" value="1" checked="checked">추천
					<input type="radio" name="review_recommend" value="0">추천 안함</font>
				</div><br><br>
				
				<div class="gender_wrapper">
					<div class="gender_div">
						<span class="gender_title">
							<font class="title_font" id="gender_title_font">남녀비율</font>
						</span><br>
						<div class="gender_value_div">
							<c:forEach var="i" begin="0" end="10">
								<c:choose>
									<c:when test="${ i == 0 }">
										<input type="radio" id="gender_${i}" name="gender" value="${i}" onclick="javascript:gender_selected('${i}')" style="display: none;">
										<label for="gender_${i}" id="gender_label_${i}" style="display: inline-block; background-color: #363636; padding: 4px 10px;" onmouseover="javascript:gender_selected('${i}')"></label>
									</c:when>
									<c:when test="${ i > 0 && i <= 5 }">
										<input type="radio" id="gender_${i}" name="gender" value="${i}" checked="checked" onclick="javascript:gender_selected('${i}')" style="display: none;">
										<label for="gender_${i}" id="gender_label_${i}" style="display: inline-block; background-color: #B2EBF4; padding: 4px 10px;" onmouseover="javascript:gender_selected('${i}')"></label>
									</c:when>
									<c:otherwise>
										<input type="radio" id="gender_${i}" name="gender" value="${i}" onclick="javascript:gender_selected('${i}')" style="display: none;">
										<label for="gender_${i}" id="gender_label_${i}" onmouseover="javascript:gender_selected('${i}')"></label>
									</c:otherwise>
								</c:choose>
							</c:forEach>
							<label id="end_gender_label" style="display: inline-block; background-color: #363636; padding: 4px 10px;"></label>&nbsp;
							<span class="gender_text">남 5 : 여 5</span>
						</div>
					</div>
				</div>
			</div>
				
			<div class="right_wrapper">
				<div class="review_job_div">
					<span class="review_job_title">
						<font class="title_font" id="review_job_font">취업 전망</font>
					</span>
					<div class="review_job_value_div">
						<c:forEach var="i" begin="1" end="5">
							<c:choose>
								<c:when test="${ i < 3 }">
									<input type="radio" id="review_job_${i}" name="review_job" value="${i}" onclick="javascript:score_selected('review_job','${i}')" style="display: none;">
									<label for="review_job_${i}" id="review_job_label_${i}" style="display: inline-block; background-color: #F15F5F; padding: 5px 15px;" onmouseover="javascript:score_selected('review_job','${i}')"></label>
								</c:when>
								<c:when test="${ i == 3 }">
									<input type="radio" id="review_job_${i}" name="review_job" value="${i}" checked="checked" onclick="javascript:score_selected('review_job','${i}')" style="display: none;">
									<label for="review_job_${i}" id="review_job_label_${i}" style="display: inline-block; background-color: #F15F5F; padding: 5px 15px;" onmouseover="javascript:score_selected('review_job','${i}')"></label>
								</c:when>
								<c:otherwise>
									<input type="radio" id="review_job_${i}" name="review_job" value="${i}" onclick="javascript:score_selected('review_job','${i}')" style="display: none;">
									<label for="review_job_${i}" id="review_job_label_${i}" onmouseover="javascript:score_selected('review_job','${i}')"></label>
								</c:otherwise>
							</c:choose>
						</c:forEach>&nbsp;
						<span class="review_job_text">보통</span>
					</div>
				</div><p>
				<div class="review_professor_div">
					<span class="review_professor_title">
						<font class="title_font" id="review_professor_font">교수진 및 강의</font>
					</span>
					<div class="review_professor_value_div">
						<c:forEach var="i" begin="1" end="5">
							<c:choose>
								<c:when test="${ i < 3 }">
									<input type="radio" id="review_professor_${i}" name="review_professor" value="${i}" onclick="javascript:score_selected('review_professor','${i}')" style="display: none;">
									<label for="review_professor_${i}" id="review_professor_label_${i}" style="display: inline-block; background-color: #FF9436; padding: 5px 15px;" onmouseover="javascript:score_selected('review_professor','${i}')"></label>
								</c:when>
								<c:when test="${ i == 3 }">
									<input type="radio" id="review_professor_${i}" name="review_professor" value="${i}" checked="checked" onclick="javascript:score_selected('review_professor','${i}')" style="display: none;">
									<label for="review_professor_${i}" id="review_professor_label_${i}" style="display: inline-block; background-color: #FF9436; padding: 5px 15px;" onmouseover="javascript:score_selected('review_professor','${i}')"></label>
								</c:when>
								<c:otherwise>
									<input type="radio" id="review_professor_${i}" name="review_professor" value="${i}" onclick="javascript:score_selected('review_professor','${i}')" style="display: none;">
									<label for="review_professor_${i}" id="review_professor_label_${i}" onmouseover="javascript:score_selected('review_professor','${i}')"></label>
								</c:otherwise>
							</c:choose>
						</c:forEach>&nbsp;
						<span class="review_professor_text">보통</span>
					</div>
				</div><p>
				<div class="review_facility_div">
					<span class="review_facility_title">
						<font class="title_font" id="review_facility_font">학교지원 및 시설</font>
					</span>
					<div class="review_facility_value_div">
						<c:forEach var="i" begin="1" end="5">
							<c:choose>
								<c:when test="${ i < 3 }">
									<input type="radio" id="review_facility_${i}" name="review_facility" value="${i}" onclick="javascript:score_selected('review_facility','${i}')" style="display: none;">
									<label for="review_facility_${i}" id="review_facility_label_${i}" style="display: inline-block; background-color: #FFCD12; padding: 5px 15px;" onmouseover="javascript:score_selected('review_facility','${i}')"></label>
								</c:when>
								<c:when test="${ i == 3 }">
									<input type="radio" id="review_facility_${i}" name="review_facility" value="${i}" checked="checked" onclick="javascript:score_selected('review_facility','${i}')" style="display: none;">
									<label for="review_facility_${i}" id="review_facility_label_${i}" style="display: inline-block; background-color: #FFCD12; padding: 5px 15px;" onmouseover="javascript:score_selected('review_facility','${i}')"></label>
								</c:when>
								<c:otherwise>
									<input type="radio" id="review_facility_${i}" name="review_facility" value="${i}" onclick="javascript:score_selected('review_facility','${i}')" style="display: none;">
									<label for="review_facility_${i}" id="review_facility_label_${i}" onmouseover="javascript:score_selected('review_facility','${i}')"></label>
								</c:otherwise>
							</c:choose>
						</c:forEach>&nbsp;
						<span class="review_facility_text">보통</span>
					</div>
				</div><p>
				<div class="review_scholarship_div">
					<span class="review_scholarship_title">
						<font class="title_font" id="review_scholarship_font">장학금</font>
					</span>
					<div class="review_scholarship_value_div">
						<c:forEach var="i" begin="1" end="5">
							<c:choose>
								<c:when test="${ i < 3 }">
									<input type="radio" id="review_scholarship_${i}" name="review_scholarship" value="${i}" onclick="javascript:score_selected('review_scholarship','${i}')" style="display: none;">
									<label for="review_scholarship_${i}" id="review_scholarship_label_${i}" style="display: inline-block; background-color: #99E000; padding: 5px 15px;" onmouseover="javascript:score_selected('review_scholarship','${i}')"></label>
								</c:when>
								<c:when test="${ i == 3 }">
									<input type="radio" id="review_scholarship_${i}" name="review_scholarship" value="${i}" checked="checked" onclick="javascript:score_selected('review_scholarship','${i}')" style="display: none;">
									<label for="review_scholarship_${i}" id="review_scholarship_label_${i}" style="display: inline-block; background-color: #99E000; padding: 5px 15px;" onmouseover="javascript:score_selected('review_scholarship','${i}')"></label>
								</c:when>
								<c:otherwise>
									<input type="radio" id="review_scholarship_${i}" name="review_scholarship" value="${i}" onclick="javascript:score_selected('review_scholarship','${i}')" style="display: none;">
									<label for="review_scholarship_${i}" id="review_scholarship_label_${i}" onmouseover="javascript:score_selected('review_scholarship','${i}')"></label>
								</c:otherwise>
							</c:choose>
						</c:forEach>&nbsp;
						<span class="review_scholarship_text">보통</span>
					</div>
				</div><p>
				<div class="review_awareness_div">
					<span class="review_awareness_title">
						<font class="title_font" id="review_awareness_font">인지도 및 학연</font>
					</span>
					<div class="review_awareness_value_div">
						<c:forEach var="i" begin="1" end="5">
							<c:choose>
								<c:when test="${ i < 3 }">
									<input type="radio" id="review_awareness_${i}" name="review_awareness" value="${i}" onclick="javascript:score_selected('review_awareness','${i}')" style="display: none;">
									<label for="review_awareness_${i}" id="review_awareness_label_${i}" style="display: inline-block; background-color: #5CD1E5; padding: 5px 15px;" onmouseover="javascript:score_selected('review_awareness','${i}')"></label>
								</c:when>
								<c:when test="${ i == 3 }">
									<input type="radio" id="review_awareness_${i}" name="review_awareness" value="${i}" checked="checked" onclick="javascript:score_selected('review_awareness','${i}')" style="display: none;">
									<label for="review_awareness_${i}" id="review_awareness_label_${i}" style="display: inline-block; background-color: #5CD1E5; padding: 5px 15px;" onmouseover="javascript:score_selected('review_awareness','${i}')"></label>
								</c:when>
								<c:otherwise>
									<input type="radio" id="review_awareness_${i}" name="review_awareness" value="${i}" onclick="javascript:score_selected('review_awareness','${i}')" style="display: none;">
									<label for="review_awareness_${i}" id="review_awareness_label_${i}" onmouseover="javascript:score_selected('review_awareness','${i}')"></label>
								</c:otherwise>
							</c:choose>
						</c:forEach>&nbsp;
						<span class="review_awareness_text">보통</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="textarea_wrapper">
			<div class="review_title_textarea">
				<font class="title_font" id="review_title_font">제목</font>
				<textarea id="review_title" name="review_title" placeholder="예시 : 명절 때 학벌은 자랑할만하지만 사시 패스 못하면.."></textarea>
			</div>
			<div class="review_pros_textarea">	
				<font class="title_font" id="review_pros_font">장점</font>
				<textarea id="review_pros" name="review_pros" placeholder="예시 : 명문대의 자부심, 해외 연수 기회, 깨끗한 시설, 인적 네트워크."></textarea>
			</div>
			<div class="review_cons_textarea">
				<font class="title_font" id="review_cons_font">단점</font>
				<textarea id="review_cons" name="review_cons" placeholder="예시 : 사시 패스 못하면 백수행. 요즘엔 로스쿨 진학이 많아졌는데 비용이 ㅎㄷㄷ함"></textarea>
			</div>
			<div class="review_way_textarea">
				<font class="title_font" id="review_way_font">졸업 후</font>
				<font class="title_font" id="review_giveup_font">[전공포기여부 : 
				<input type="radio" name="review_giveup" value="0" checked="checked">포기 안함&nbsp;
				<input type="radio" name="review_giveup" value="1">포기]</font>
				<textarea id="review_way" name="review_way" placeholder="예시 : 30살까지 사시 도전했지만 패스 못해서 일반 기업 법무팀에서 근무중. 그나마 잘 풀린 케이스"></textarea>
			</div>
			
			<div class="button_wrapper">
				<a href="javascript:registerReview()">등록</a>
			</div><br><br>
		</div>
	</form>
</div>
</body>
</html>